<template>
  <el-form ref="formRef" :model="formModel" :rules="rules" label-width="130px" class="dialog-form" label-position="right" status-icon>
    <el-form-item label="所属城市:" prop="cityCode">
      <query-dict
        :dict-list="cityList"
        class="select-item"
        :disabled="initCityCode !== '00'"
        placeholder="请选择所属城市"
        :value.sync="formModel.cityCode"
      ></query-dict>
    </el-form-item>
    <el-form-item label="优惠券名称:" prop="title">
      <el-input v-model.trim="formModel.title" class="form-item" placeholder="请输入优惠券名称" clearable />
    </el-form-item>
    <el-form-item label="优惠券金额:" prop="money">
      <el-input v-model.trim="formModel.money" class="select-item" placeholder="请输入优惠券金额" clearable>
        <template slot="append">元</template>
      </el-input>
    </el-form-item>
    <el-form-item label="有效时间:" prop="dateTime">
      <el-date-picker
        v-model="formModel.dateTime"
        type="datetimerange"
        value-format="yyyy-MM-dd HH:mm:ss"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :default-time="['00:00:00', '23:59:59']"
        align="right"
      ></el-date-picker>
    </el-form-item>
    <el-form-item label="优惠券数量:" prop="num">
      <el-input-number v-model="formModel.num" :min="1" :max="100" label="优惠券数量"></el-input-number>
    </el-form-item>
    <el-form-item label="描述:">
      <el-input
        type="textarea"
        :rows="4"
        maxlength="100"
        show-word-limitv-model.trim="formModel.description"
        class="form-item"
        v-model="formModel.description"
        placeholder="请输入优惠券描述"
        clearable
      />
    </el-form-item>
  </el-form>
</template>

<script>
import utils from 'utils'
import MixinForm from 'mixins/form'
// import dictObj from '@/store/dictData'

export default {
  mixins: [MixinForm],
  props: {
    initData: {
      type: Object,
      default() {
        return {
          num: 1
          // TODO... 初始化数据，需加备注
        }
      }
    }
  },
  data() {
    return {
      cityList: [], // 城市列表
      initCityCode: '',
      rules: {
        title: [{ required: true, message: '请输入优惠券名称', trigger: 'blur' }],
        money: [{ required: true, message: '请输入优惠券金额', trigger: 'blur' }],
        dateTime: [{ required: true, message: '请设置优惠券有效时间', trigger: 'change' }],
        num: [{ required: true, message: '请输入优惠券数量', trigger: 'blur' }],
        cityCode: [{ required: true, message: '请选择城市', trigger: 'change' }]
      },
      pickerOptions: {
        ...utils.pickerOptions,
        disabledDate: utils.disabledDate.disPrevToday
      }
    }
  },
  computed: {
    formModel: {
      get() {
        return this.initData
      },
      set(val) {
        this.$emit('update:init-data', val)
      }
    }
  },
  created() {
    const { cityCode, cityName } = utils.getStore('cityInfo')
    const cityList = utils.getStore('cityList')
    if (cityCode === '00') {
      this.initCityCode = '00'
      this.cityList = this.$store.getters.allCity.length ? this.$store.getters.allCity : cityList
    } else {
      this.cityList = [
        {
          label: cityName,
          value: cityCode
        }
      ]
      this.formModel.cityCode = cityCode
      this.initCityCode = '11'
    }
  }
}
</script>
